import React, { useEffect, useState } from 'react'
import './index.css'
import { Layout, Menu } from 'antd'
import {
    UserOutlined,
    GlobalOutlined
} from '@ant-design/icons';


// 高阶路由组件，谁用他谁就能够拥有里所有的属性
import { withRouter } from 'react-router-dom'
import axios from 'axios';

const { Sider } = Layout
const { SubMenu } = Menu

//模拟数组结构
// const menuList = [
//     {
//         key: "/home",
//         title: "首页",
//         icon: <UserOutlined />
//     },
//     {
//         key: "/user-manage",
//         title: "用户管理",
//         icon: <UserOutlined />,
//         children: [
//             {
//                 key: "/user-manage/list",
//                 title: "用户列表",
//                 icon: <UserOutlined />
//             }
//         ]
//     },
//     {
//         key: "/right-manage",
//         title: "权限管理",
//         icon: <UserOutlined />,
//         children: [
//             {
//                 key: "/right-manage/role/list",
//                 title: "角色列表",
//                 icon: <UserOutlined />
//             },
//             {
//                 key: "/right-manage/right/list",
//                 title: "权限列表",
//                 icon: <UserOutlined />
//             }
//         ]
//     }
// ]

const iconList = {
    "/home": <UserOutlined />,
    "/user-manage/list": <UserOutlined />,
    "/right-manage/role/list": <UserOutlined />,
    "/right-manage/right/list": <UserOutlined />,
    "/news-manage/add": <UserOutlined />,
    "/news-manage/draft": <UserOutlined />,
    "/news-manage/category": <UserOutlined />,
    "/audit-manage/audit": <UserOutlined />,
    "/audit-manage/list": <UserOutlined />,
    "/publish-manage/unpublished": <UserOutlined />,
    "/publish-manage/published": <UserOutlined />,
    "/publish-manage/sunset": <UserOutlined />,
}

function SideMenu(props) {

    const [menu, setMenu] = useState([])
    useEffect(() => {
        axios.get("/rights?_embed=children").then(res => {
            // console.log(res.data);
            setMenu(res.data)
        })
    }, [])

    // 根据后台的数据路径
    const { role: { rights } } = JSON.parse(localStorage.getItem("token"))
    const checkPagePermisson = (Item) => {
        // console.log(checkPagePermisson);
        return Item.pagepermisson && rights.includes(Item.key)
    }
    const renderMenu = (menuList) => {
        return menuList.map(Item => {
            // checkPagePermission(item)传进参数item；如果为false的话就不渲染</Menu.Item>
            if (Item.children?.length > 0 && checkPagePermisson(Item)) {
                return <SubMenu key={Item.key} icon={iconList[Item.key]} title={Item.title}>
                    {/* 这里使用到的是递归 */}
                    {renderMenu(Item.children)}
                </SubMenu>
            }
            // checkPagePermission(item)传进参数item；如果为false的话就不渲染</Menu.Item>
            return checkPagePermisson(Item) && <Menu.Item key={Item.key} icon={iconList[Item.key]} onClick={() => {
                console.log(props); // 用了widthRouter才能去拿到参数
                props.history.push(Item.key)
            }}>{Item.title}</Menu.Item>
        })
    }

    // console.log(props.location);
    const selectKeys = [props.location.pathname]
    const openKeys = ['/' + props.location.pathname.split('/')[1]]
    // console.log(openKeys);
    return (
        <Sider trigger={null} collapsible collapsed={false}>
            <div className="scollSideHead" style={{ display: 'flex', height: "100%", "flexDirection": "column" }}>
                <div className="logo" ><GlobalOutlined /> </div>
                <div className="scollSideCenter" style={{ flex: 1, "overflow": "auto" }}>
                    {/* defaultSelectedKeys和selectedKeys属性的区别是前者是非受控，后者是受控*/}
                    <Menu theme="dark" defaultOpenKeys={openKeys} mode="inline" selectedKeys={selectKeys}>
                        {renderMenu(menu)}
                    </Menu>
                </div>
            </div>
        </Sider>
    )
}

export default withRouter(SideMenu)